<template>
  <div ref="divRef" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

let divRef: any = ref(null);
onMounted(() => {
  let myChart = echarts.init(divRef.value, null as any, {
    renderer: "svg",
  });
  let options = getOption();
  myChart.setOption(options);
});

function getOption() {
  let pieDatas = [
    {
      value: 100,
      name: "广州占比",
      percentage: "5%",
      color: "#34D160",
    },
    {
      value: 200,
      name: "深圳占比",
      percentage: "4%",
      color: "#027FF2",
    },
    {
      value: 300,
      name: "东莞占比",
      percentage: "8%",
      color: "#8A00E1",
    },
    {
      value: 400,
      name: "佛山占比",
      percentage: "10%",
      color: "#F19610",
    },
    {
      value: 500,
      name: "中山占比",
      percentage: "20%",
      color: "#6054FF",
    },
    {
      value: 600,
      name: "珠海占比",
      percentage: "40%",
      color: "#00C6FF",
    },
  ];

  let colors = pieDatas.map((item) => {
    return item.color;
  });

  let data = pieDatas.map((item) => {
    return {
      value: item.value,
      name: item.name,
    };
  });

  let total = pieDatas.reduce((a, b) => {
    return a + b.value * 1;
  }, 0);

  let option = {
    color: colors, // 调色盘颜色
    // 标题组件
    title: {
      // 主标题文本，支持使用 \n 换行
      text: `{nameSty| 充电桩总数}\n{number|${total}}`,
      // title 组件离容器上侧的距离
      top: "50%",
      // title 组件离容器左侧的距离
      left: "30%",
      textStyle: {
        // 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果
        rich: {
          nameSty: {
            // 文字的字体大小
            fontSize: 19,
            //  文字的颜色
            color: "white",
            // 文字块的内边距
            padding: [10, 0],
          },
          number: {
            fontSize: 24,
            color: "white",
            padding: [4, 0, 0, 20],
          },
        },
      },
    },
    // 图例组件
    legend: {
      // 图例列表的布局朝向：horizontal：横向；vertical：纵向
      orient: "vertical",
      // 图例组件离容器右侧的距离
      right: "10%",
      // 图例组件离容器上侧的距离
      top: "18%",
      // 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
      itemGap: 20,
      // 图例标记的图形宽度
      itemWidth: 16,
      // 图例标记的图形高度
      itemHeigth: 16,
      // 图例项的 icon
      icon: "rect",
      // 用来格式化图例文本，支持字符串模板和回调函数两种形式
      formatter: function (name: string) {
        var currentItem = pieDatas.find((item) => item.name === name);
        return (
          "{nameSty|" +
          currentItem?.name +
          "}\n" +
          "{numberSty|" +
          currentItem?.value +
          "个 }" +
          "{preSty|" +
          currentItem?.percentage +
          "}"
        );
      },
      // 全局的字体样式
      textStyle: {
        rich: {
          nameSty: {
            fontSize: 12,
            color: "#FFFFFF",
            padding: [10, 14],
          },
          numberSty: {
            fontSize: 12,
            color: "#40E6ff",
            padding: [0, 0, 0, 14],
          },
          preSty: {
            fontSize: 12,
            color: "#40E6ff",
          },
        },
      },
    },
    // 绘画图形
    series: [
      {
        // 饼图类型
        type: "pie",
        // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
        center: ["40%", "57%"],
        // 饼图的半径，数组的第一项是内半径，第二项是外半径
        radius: ["30%", "75%"],
        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
        label: {
          show: false,
        },
        // 系列中的数据内容数组
        data: data,
        // 是否展示成南丁格尔图，通过半径区分数据大小，'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小，'area' 所有扇区圆心角相同，仅通过半径展现数据大小
        roseType: "area",
      },
    ],
  };

  return option;
}
</script>

<style scoped></style>
